jQueryっぽく要素を回転させたい
$("#elem").rotate(90); => #elemが90度回転
$("#elem").rotate() => "90"が返る
こんな感じになります。
$.fn.rotate = function( deg ) {
if( deg === undefined ) {
deg = $(this[0]).data.rotateDeg;
if ( deg === undefined ) { return 0; }
else { return deg; }
}
this.each(function(){
var $el = $(this);
var rotation = 'rotate('+ (deg) +'deg)';
$el
.css({
'webkitTransform': rotation ,
'mozTransform' : rotation ,
'msTransform' : rotation ,
'oTransform' : rotation ,
'transform' : rotation });
$el.data.rotateDeg = deg;
});
return this;
};
jQuery 1.8以降ならベンダプレフィックスは自動付加なのでこうでしょうか。
(function($) {
$.fn.rotate = function(angle) {
if(angle == null) {
return this.data("angle") || 0;
} else {
return this.data("angle", angle)
.css("transform", "rotate(" + angle + "deg)");
}
};
})(jQuery);